<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css.css">
	<script type="text/javascript" src="startMove.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var oPlay=document.getElementById('play');
			var oOl=oPlay.getElementsByTagName('ol')[0];
			var oUl=oPlay.getElementsByTagName('ul')[0];
			var aSmallLi=oOl.getElementsByTagName('li');
			var aBigLi=oUl.getElementsByTagName('li');


            var now=0;
			for (var i = 0; i < aSmallLi.length; i++) {
				aSmallLi[i].index=i;
               
				aSmallLi[i].onmouseover=function(){
					now=this.index;
					move();

				};
			};
         
           var timer=null;
           timer=setInterval(next,2000);

           oPlay.onmouseover=function(){
           	  clearInterval(timer);
           }

           oPlay.onmouseout=function(){
           	  timer=setInterval(next,2000);
           }

           function next(){
            	now++;
            	if (now==aSmallLi.length) {
            		now=0;
            	}
            	move();
            }
     
           function move(){
       			for (var j = 0; j < aSmallLi.length; j++) {
				    aSmallLi[j].className="";
				    aBigLi[j].style.display='none';
	            };
	                aSmallLi[now].className="active";
	                aBigLi[now].style.display="block";
            };

		};
	</script>
</head>
<body>
	<div class="play" id="play">
		<ul>
			<li style="display: block;">
				<a href="javascript:;">
					<img src="images/akito.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="images/Berserk.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="images/EVA.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="images/Gintama.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="images/SteinsGate.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="images/SummerWars.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="images/Unicorn.jpg" alt="">
				</a>
			</li>
		</ul>
		<ol>
			<li class="active">
					<img src="images/akito_s.jpg" alt="">
					<strong>亡国的阿基德</strong>
					<span>Code Geass</span>
			</li>
			<li>
					<img src="images/Berserk_s.jpg" alt="">
					<strong>剑风传奇</strong>
					<span>黄金时代</span>
			</li>
			<li>
					<img src="images/EVA_s.jpg" alt="">
					<strong>新EVA剧场版</strong>
                    <span>New Evangelion</span>
			</li>
			<li>
					<img src="images/Gintama_s.jpg" alt="">
					<strong>银魂剧场版</strong>
					<span>永远的万事屋</span>
			</li>
			<li>
					<img src="images/SteinsGate_s.jpg" alt="">
					<strong>石头门剧场版</strong>
                    <span>负荷领域的既视感</span>
			</li>
			<li>
					<img src="images/SummerWars_s.jpg" alt="">
					<strong>夏日大作战</strong>
                    <span>Summer Wars</span>
			</li>
			<li>
					<img src="images/Unicorn_s.jpg" alt="">
					<strong>高达UC</strong>
                    <span>Gundam Unicorn</span>
			</li>
		</ol>
	</div>
</body>
</html>


